<template>


  <div class="app-container" >

    <div class="big_box" style="height: 100%;">
    <div class="right_box" style="height: 100%;">
      <el-card >
        <div>
        <!-- 卡片内容 -->
          <el-form :model="queryParamsright" ref="queryForm" size="small" :inline="true" label-position="right">
                <el-form-item label="手牌号" prop="handBrand" label-width="100px">
                  <el-input
                    v-model="queryParams.handBrand"

                    clearable
                    placeholder="请输入手牌号"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"  size="mini" @click="handleQuery">录入</el-button>
                  <el-button type="primary"  size="mini"   :disabled="multiple" @click="fendan">分单</el-button>
                </el-form-item>
              </el-form>

          <el-table v-loading="loading" :data="detailsList" border @selection-change="handleSelectionChange" style="height: 500px; overflow-y: scroll;">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column type="index" label="序号"  width="55" :index="indexMethod" align="center"/>
            <el-table-column label="手牌号" align="center" prop="handBrand" />

            <el-table-column label="项目名称" align="center" prop="entryName" />
            <el-table-column label="项目类别" align="center" prop="projectCategory">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.yqg_project_category" :value="scope.row.projectCategory"/>
              </template>
            </el-table-column>

            <el-table-column label="单位" align="center" prop="unit" />

            <el-table-column label="单价" align="center" prop="unitPrice" />

            <el-table-column label="数量" align="center" prop="quantity" />

           <!-- <el-table-column label="分单数量" align="center" prop="note5">
              <template slot-scope="scope">
                <el-input v-model.number.trim="scope.row.note5" @change="handleChange(scope.row)"></el-input>
              </template>
            </el-table-column>-->
            <el-table-column label="分单数量" align="center" prop="note5">
              <template slot-scope="scope">
                <el-input v-model.number.trim="scope.row.note5" @change="handleChange(scope.row, scope.$index)"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="合计金额" align="center" prop="totalAmount" />

            <el-table-column label="房间类型" align="center" prop="roomType" />
            <el-table-column label="开房时间" align="center" prop="openingHours" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.openingHours, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="退房时间" align="center" prop="checkOutTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.checkOutTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="退房状态" align="center" prop="checkOutStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.yqg_check_out_status" :value="scope.row.checkOutStatus"/>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
          </el-card>
    </div>
    <div class="right_box" style="height: 100%;">

      <el-card >
        <!-- 卡片内容 -->
        <div>
              <el-form :model="queryParamsright" ref="queryForm" size="small" :inline="true" label-position="right">
                <el-form-item label="转账手牌号" prop="handBrand" label-width="100px">
                  <el-input
                    v-model="queryParamsright.handBrand"

                    clearable
                    placeholder="请输入转账手牌号"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"  size="mini" @click="handleQueryright">录入</el-button>
                </el-form-item>
              </el-form>
          <el-table v-loading="loadingright" :data="detailsListright" border @selection-change="handleSelectionChange" style="height: 500px; overflow-y: scroll;">
         <!--   <el-table-column type="selection" width="55" align="center" />-->
            <el-table-column type="index" label="序号"  width="55" :index="indexMethodright" align="center"/>

            <el-table-column label="手牌号" align="center" prop="handBrand" />
            <el-table-column label="项目名称" align="center" prop="entryName" />
            <el-table-column label="项目类别" align="center" prop="projectCategory">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.yqg_project_category" :value="scope.row.projectCategory"/>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="unit" />
            <el-table-column label="单价" align="center" prop="unitPrice" />
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="合计金额" align="center" prop="totalAmount" />
            <el-table-column label="房间类型" align="center" prop="roomType" />
            <el-table-column label="开房时间" align="center" prop="openingHours" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.openingHours, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="退房时间" align="center" prop="checkOutTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.checkOutTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="退房状态" align="center" prop="checkOutStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.yqg_check_out_status" :value="scope.row.checkOutStatus"/>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalright>0"
            :total="totalright"
            :page.sync="queryParamsright.pageNum"
            :limit.sync="queryParamsright.pageSize"
            @pagination="getListright"
          />
        </div>
      </el-card>
    </div>
    </div>
    <br>
    <div style="text-align: right;">

      <el-button @click="cancel" type="" >返 回</el-button>
    </div>
  </div>

</template>

<script>

    import { listDetails, getDetails, delDetails, addDetails, updateDetails ,getfendan} from "@/api/module/gs/details";

    export default {
      name: "Details",
      props: ['fendanhandid'], // 接收传入的 id
      dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
      data() {
        return {
          // 遮罩层
          loading: true,
          loadingright:true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 总条数
          totalright: 0,
          // 消费详细表格数据
          detailsList: [],
          detailsListright: [],

          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userId: null,
            deptId: null,
            department: null,
            nickName: null,
            userName: null,
            post: null,
            handBrand: null,
            handCategory: null,
            handState: 1,
            retentionStatus: null,
            mergeStatus: null,
            openingTime: null,
            drawTime: null,
            mergeHands: null,
            mergeBarBillsId: null,
            leaveTime: null,
            beforeLeave: null,
            beforeBarBillsId: null,
            entryName: null,
            projectCategory: null,
            projectCode: null,
            mnemonicCode: null,
            unit: null,
            unitPrice: null,
            commissionPrice: null,
            together: null,
            sailingsSigns: null,
            barBillsId: null,
            recordingTime: null,
            quantity: null,
            totalAmount: null,
            seat: null,
            orderNumber: null,
            paymentMethod: null,
            consumptionStatus: null,
            chargebackTime: null,
            reasonForChargeback: null,
            chargebackProcessorAccount: null,
            chargebackProcessorName: null,
            clockTime: null,
            nextClockTime: null,
            nextClockStatus: null,
            recordEmployeeNumber: null,
            recorderEmployeeName: null,
            roomType: null,
            openingHours: null,
            checkOutTime: null,
            checkOutStatus: null,
            note1: null,
            note5: null,
            note2: null,
            note3: null,
            note4: null,
            note5: null,
            note6: null,
            note7: null,
            note8: null,
            note9: null,
            note10: null
          },
          // 查询参数
          queryParamsright: {
            pageNum: 1,
            pageSize: 10,
            userId: null,
            deptId: null,
            department: null,
            nickName: null,
            userName: null,
            post: null,
            handBrand: null,
            handCategory: null,
            handState: 1,
            retentionStatus: null,
            mergeStatus: null,
            openingTime: null,
            drawTime: null,
            mergeHands: null,
            mergeBarBillsId: null,
            leaveTime: null,
            beforeLeave: null,
            beforeBarBillsId: null,
            entryName: null,
            projectCategory: null,
            projectCode: null,
            mnemonicCode: null,
            unit: null,
            unitPrice: null,
            note5: null,
            commissionPrice: null,
            together: null,
            sailingsSigns: null,
            barBillsId: null,
            recordingTime: null,
            quantity: null,
            totalAmount: null,
            seat: null,
            orderNumber: null,
            paymentMethod: null,
            consumptionStatus: null,
            chargebackTime: null,
            reasonForChargeback: null,
            chargebackProcessorAccount: null,
            chargebackProcessorName: null,
            clockTime: null,
            nextClockTime: null,
            nextClockStatus: null,
            recordEmployeeNumber: null,
            recorderEmployeeName: null,
            roomType: null,
            openingHours: null,
            checkOutTime: null,
            checkOutStatus: null,
            note1: null,
            note2: null,
            note3: null,
            note4: null,
            note5: null,
            note6: null,
            note7: null,
            note8: null,
            note9: null,
            note10: null
          },
          // 表单参数
          form: {},
          formp: {},
          // 表单参数
          formright: {},
          // 表单校验
          rules: {
          }
        };
      },
      created() {

        this.getList1();
        this.getListright1();
      },
      computed: {
        newDetailsList() {
          // 根据 detailsList 处理得到新数组
          return this.detailsList.map(item => {
            return {
              ...item,
              note5: item.quantity  // 将 note5 初始化为 quantity
            };
          });
        }
      },
      //必须写监听，不然会出现id还是还是上一次的问题
      watch: {

      },
      methods: {
        /** 查询消费详细列表 */
        handleChange(row, index) {
          if (row.note5 > row.quantity) {
            console.log(row.quantity+'row.quantity')
            row.note5 = row.quantity;
            this.$message({
              message: '分单数量不能大于数量',
              type: 'warning'
            });
          }else if(row.note5 <=0){
            this.$message({
              message: '分单数量不能小于或等于0',
              type: 'warning'
            });
          }
        },
        getList1() {
          this.loading = false;

        },
        getListright1() {
          this.loadingright = false;

        },
        indexMethod(index) {
          index = (index + 1) + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
          return index
        },
        indexMethodright(index) {
          index = (index + 1) + (this.queryParamsright.pageNum - 1) * this.queryParamsright.pageSize
          return index
        },

        getList() {
          this.loading = true;
          listDetails(this.queryParams).then(response => {
            this.detailsList = response.rows;
            this.detailsList.forEach(item => {
              item.note5 = item.quantity;
            });
            this.total = response.total;
            this.loading = false;
          });
        },
        getListright() {
          this.loadingright = true;
          listDetails(this.queryParamsright).then(response => {
            this.detailsListright = response.rows;
            this.totalright = response.total;
            this.loadingright = false;
          });
        },
        // 取消按钮
        cancel() {
          this.$emit("closeDialog"); // 触发 closeDialog 事件
          // 关闭页面并重置变量
          this.detailsList = []
          this.total = 0
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            handBrand: '',
          }
          this.loading = false

          this.detailsListright = []
          this.totalright = 0
          this.queryParamsright = {
            pageNum: 1,
            pageSize: 10,
            handBrand: '',
          }
          this.loadingright = false
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 搜索按钮操作 */
        handleQueryright() {
          this.queryParamsright.pageNum = 1;
          this.getListright();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {

          this.ids = selection.map(item => item.id)
          this.note5 = selection.map(item => item.note5)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加消费详细";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const ID = row.id || this.ids
          getDetails(ID).then(response => {
            this.form = response.data;
            this.open = true;
            this.title = "修改消费详细";
          });
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.id != null) {
                updateDetails(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                addDetails(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const IDs = row.id || this.ids;
          this.$modal.confirm('是否确认删除消费详细编号为"' + IDs + '"的数据项？').then(function() {
            return delDetails(IDs);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
          this.download('project/details/export', {
            ...this.queryParams
          }, `details_${new Date().getTime()}.xlsx`)
        },
        fendan(row){
          this.$modal.confirm('是否确认分单？').then(function() {
          }).then(() => {

            const ids = row.id || this.ids;
            const note5 = row.note5 || this.note5;
            const leftid=this.queryParams.handBrand;
            const rightid=this.queryParamsright.handBrand;
            console.log(note5+"ppp");
            getfendan(ids,leftid,rightid,note5).then(response => {

              this.getList();
              this.getListright();
              this.$modal.msgSuccess("分单成功")
            });





          }).catch(() => {});
        },




      }
    };


  </script>





<style lang="scss" scoped>

  .big_box{height: 100%;display: flex;}
  .left_box{width: 50%;height: 600px;}
  .right_box{width: 50%;height: 600px;}

</style>
